<template>
  <div>
    <Row>
      <Col :span="24"
           style="padding:10px 150px">
      <videoPlayer ref="videoPlayer1"
                   :options="videoOptions1"
                   class="vjs-custom-skin videoPlayer" />

      </Col>
    </Row>
  </div>
</template>
<script>
import 'video.js/dist/video-js.css'

import videoPlayer from './player.vue'
// import { videoPlayer } from 'vue-video-player'
import 'videojs-flash'
export default {
  props: {
    videoSrcs: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  components: {
    videoPlayer
  },

  data() {
    return {
      modalVisible: false,
      videoOptions1: {
        width: 550,
        height: 420,
        // responsive:true,
        sources: [
          {
            type: 'rtmp/mp4',
            src: ''
            // src: 'rtmp://58.200.131.2:1935/livetv/hunantv'
          }
        ],
        techOrder: ['flash', 'html5'],
        muted: true, // 默认静音
        preload: 'auto', // 视频预加载
        autoplay: true,
        controls: true,
        notSupportedMessage: '此视频暂无法播放，请稍后再试',
        controlBar: {},
        live: true,
        language: 'zh-CN'
      }
    }
  },
  watch: {
    videoSrcs: {
      deep: true,
      handler(curVal, oldVal) {
        if (curVal && curVal.length > 7) {
          this.videoOptions1.sources[0].src = curVal[0]
        }
      },
      immediate: true
    }
  },
  methods: {}
}
</script>
<style lang="less">
</style>